<template>
    <div style="width:100%;">
        <div class="configTable">
            <li class="costItemTitle">子系统</li>
            <div class="addCostList">
                <!-- v-if="$root.btnControl.find(item=>item=='add')" -->
                <el-button  size="small" type="primary" @click="addCostDialog=true">+ 新增</el-button>
                <el-button  type="warning" @click="editCostItem(0);dragDisable = false" class="el-icon-edit" size="small">编辑</el-button>
            </div>
            <div class="configItem">
                <draggable :disabled="dragDisable" class="costItemList" :list="configList"  group="costItem">
                    <div  v-for="(item1,index) in configList" :key="item1.id">
                        <div class="itemList" @click="updateItem(item1)" :title="item1.id">
                            <div>{{item1.subsystemCode}}</div>
                            <div>{{item1.name}}</div>
                        </div>
                        <span v-if="!flag" @click="delmeterconfig(item1)" class="el-icon-close"></span>
                    </div>
                </draggable>
            </div>
        </div>
        <div class="btn">
            <!-- <el-button @click="editCostItem(1)" v-show="!flag">保存</el-button> -->
            <!-- <el-button v-show="flag">提交</el-button> -->
            <el-button v-show="!flag" @click="restore();dragDisable = true">取 消</el-button>
            <!-- <el-button v-show="!flag" @click="remove();dragDisable = true">保 存</el-button> -->
        </div>

        <!-- 费项 -->
        <el-dialog :title="updateFlag?'修改子系统':'新增子系统'":visible.sync="addCostDialog" width="30%">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="120px">
                <!-- <el-form-item label="所属收费大类" prop="parentId">
                    <el-input v-model.trim="addForm.parentId"></el-input>
                </el-form-item> -->
                <el-form-item label="子系统编码" prop="subsystemCode">
                    <el-input :disabled="updateFlag" v-model.trim="addForm.subsystemCode"></el-input>
                </el-form-item>
                <el-form-item label="子系统名称" prop="name">
                    <el-input v-model.trim="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="sortValue">
                    <el-input v-model.number.trim="addForm.sortValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click='addCostDialog = false,updateFlag = false,addForm={name:"",subsystemCode:"",sortValue:1}'>取 消
                </el-button>
                <el-button type="primary" @click="meterconfigadd('addForm')">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import draggable from 'vuedraggable';
import {
    subsystemadd,// meterconfigadd
    subsystemupdate,//,meterconfigupdate
    subsystemlistxqId,//meterconfiglist
    subsystemdelete,//meterconfigdelete,
} from '../../url/api';
export default {
    data() {
        return {
            dragDisable:true,
            delArr: [],
            costItemFlag: {},
            updateFlag: false,
            updateObj: {}, //修改费项列表 or 类型
            addForm: {
                //增加费项类型
                name: '',
                subsystemCode: '',
                sortValue: 1,
            },
            addListForm: {
                //增加费项列表
                id: '',
                parentId: '',
                name: '',
                sortValue: 1,
            },
            addCostDialog: false,
            addCostListDialog: false,
            flag: 1, //1xiug
            disable: true,
            rules: {
                subsystemCode: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                name: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                sortValue: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '该项必须为数字' },
                ],
            },
            configList: [],
            restoreArr: [],
        };
    },
    methods: {
        dragEnd(index){
            //console.log(index);
        },
        updateItem(item) {
            if(this.dragDisable == false){
                 this.addCostDialog = true
                 this.updateFlag = true
            }
            delete item.xqId
            this.addForm = JSON.parse(JSON.stringify(item));;
            // //console.log(item);
            // if (!this.updateFlag) return;
            // this.addListForm = item;
            // this.addCostListDialog = true;
            // this.updateFlag = true;
            // //console.log(this.updateObj);
        },
        remove() {
            this.addCostListDialog = false;
            this.flag = true;
            this.updateFlag = false;
            if (!this.delArr.length) return;
            deleteCostItem(this.delArr).then((res) => {
                if (res.data.ok) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    // this.msg('删除成功');
                    this.delArr = [];
                    this.getList();
                }
            });
        },
        //取消删除
        restore() {
            // this.configList = JSON.parse(JSON.stringify(this.restoreArr));
            this.delArr = [];
            this.disable = false;
            this.flag = true;
            this.updateFlag = false;
        },

        // 新增费项类型
        meterconfigadd(addForm) {
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    if(this.updateFlag){//修改
                        subsystemupdate(this.addForm).then((res) => {
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            // this.msg('修改成功');
                            this.addForm = {
                                name: '',
                                subsystemCode: '',
                                sortValue: 1,
                            };
                            this.updateFlag = false
                            this.getList();
                        }
                    });
                    }else{
                        subsystemadd(this.addForm).then((res) => {
                        if (res.data.ok) {
                            // this.msg('新增成功');
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.addForm = {
                                name: '',
                                subsystemCode: '',
                                sortValue: 1,
                            };
                            this.getList();
                        }
                    });
                    }

                    this.addCostDialog = false;
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },

        //删除仪表类型
        delmeterconfig(item) {
            let code = item.subsystemCode
            let codes = []
            codes.push(code);
            this.$confirm("确定删除吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   // //console.log(params);
                   subsystemdelete(codes).then((res) => {
                        //console.log("删除", res)
                        if (res.data.ok) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getList()
                        } else {
                            this.$message('删除失败')
                        }
                    })

                }).catch(() => {

                });

            // item.del = true;
            // this.delArr.push(item.id);
        },
        //修改
        editCostItem(v) {
            this.flag = v;
            if (this.flag) {
                document
                    .querySelector('.configTable')
                    .style.setProperty('--edit', '#41c8ee');
                this.disable = true;
            } else {
                this.disable = false;
                this.updateFlag = true;
            }
        },

        getList() {
            let params = {
                xqId: 0
            }
            subsystemlistxqId(params).then((res) => {
                if (res.data.ok) {
                    //console.log(res);

                    this.configList = JSON.parse(JSON.stringify(res.data.data));
                    //console.log(this.configList);
                    // this.restoreArr = JSON.parse(JSON.stringify(res.data.data));
                }
            });
        },
    },
    mounted() {
        this.getList();
    },
    components: {
        draggable,
    },
};
</script>
<style lang="scss" scoped>
// :root{
//     --edit:#e6a23c;
//     --noraml:#41c8ee;
// }
// $editColor: #e6a23c;
// $noramlColor: var(--noraml);
.configTable {
    --edit: #41c8ee;
    display: inline-block;
    width: 80%;
    // border: 1px solid;
    // margin: 5% 0 0 10%;
    background: rgba($color: #0c2038, $alpha: 0.72);
    padding: 76px;
    margin: 3% 0 0 6%;
    .costItemTitle,
    .addCostList {
        display: inline-block;
        width: 48%;
        list-style: circle;
        font-size: 20px;
        text-indent: 0.06rem;
        margin-bottom: 10px;
    }
    .addCostList {
        text-align: right;
        font-size: 16px;
    }

    .configItem {
        width: 100%;
        // height: 54px;
        // line-height: 54px;
        display: flex;
        flex-flow: wrap;
        align-items: center;
        font-size: 18px;
        // border: 1px solid var(--edit);
        color: var(--edit);
        .parentItem {
            display: inline-block;
            width: 160px;
            text-align: center;
            // padding: 0 20px;
            border-right: 2px solid #41c8ee;
            margin-right: 20px;
        }
        .addMoney {
            height: 34px;
            line-height: 34px;
            width: 54px;
            text-align: center;
            background: var(--edit);
            border-radius: 10px;
            cursor: pointer;
            color: white;
            transform: scale(.8);
        }
        .labelId {
            &::-webkit-input-placeholder {
                color: var(--edit);
            }
            display: inline-block;
            width: 70px;
            border: 0;
            border-right: 1px solid #40c3e8;
        }
        .labelItem {
            &::-webkit-input-placeholder {
                color: var(--edit);
            }
            box-sizing: border-box;
            text-align: center;
            flex: 1;
            // background: #0f59ab;
            margin-right: 20px;
            border-right: 1px solid var(--edit);
        }
        .costItemList {
            flex: 9;
            height: 54px;
            line-height: 34px;

            & > div {
                display: inline-block;
                // background: var(--edit);
                background: #3c78b7;
                // height: 40px;
                // line-height: 40px;
                margin-right: 10px;
                // width: 124px;
                position: relative;
                border-radius: 6px;
                padding: 0 20px;
                div {
                    display: inline-block;
                    width: 100%;
                    color: #fff;
                    text-align: center;
                }
            }
            & > div > span {
                position: absolute;
                right: 0px;
                top: 0px;
                color: #fff;
                cursor: pointer;
                font-size: 16px;
            }
            .costItem {
                display: inline-block;
                width: 80px;
                min-width: 80px;
                max-width: 160px;
                font-size: 18px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                // padding: 0 18px;
                // background: skyblue;
                color: #fff;
                margin: 0 10px;
                cursor: pointer;
                text-align: center;
                border: 0;
                &::-webkit-input-placeholder {
                    color: #fff;
                }
            }
            & > div > input {
                padding-left: 6px;
            }

            & .itemList{
                font-size: 14px;
                display: flex;
                flex-direction:column;
                div{
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }
    }
    // .configItem:not(:last-child) {
    //     border-bottom: 1px solid ;
    // }
    .configItem:nth-child(1) {
        border-top: 1px solid;
    }
    .configItem:nth-child(odd){
        background: #1a5480;
    }
    .configItem:nth-child(even){
        background: #0e3a5a;
    }
}
.btn {
    text-align: center;
    margin-top: 30px;
}
</style>
